<div class="modal fade" id="community-form" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <form class="community">
                @if(isset($id))
                    <input type="hidden" name="id" value="{{$id or ''}}">
                @endif
                <div class="modal-header">
                    <h4 class="modal-title">{{isset($id)?'修改地区信息':'添加社区'}}</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">

                    <div class="form-group">
                        <label for="initial">省/直辖市:</label>
                        <select class="form-control" id="province" name="province_id" @change="selectProvince">
                            <option value="">请选择</option>
                            @foreach($root_districts as $v)
                                <option {{isset($community) && $community->province_id == $v->id ? 'selected':''}} value="{{$v->id}}">{{$v->name}}</option>
                            @endforeach
                        </select>
                    </div>

                    <template v-if="form.field.cities">
                        <div class="form-group">
                            <label for="city">市/地区:</label>
                            <select class="form-control" id="city" name="city_id" @change="selectCity" v-model="form.field.city_id" >
                                <option value="">请选择</option>
                                <option v-for="option in form.field.cities" :value="option.id">@{{ option.name }}</option>
                            </select>
                        </div>
                    </template>

                    <template v-if="form.field.counties">
                        <div class="form-group">
                            <label for="county">县/区:</label>
                            <select class="form-control" name="county_id" id="county" v-model="form.field.county_id" >
                                <option value="">请选择</option>
                                <option v-for="option in form.field.counties" :value="option.id" >@{{ option.name }}</option>
                            </select>
                        </div>
                    </template>


                    <div class="form-group">
                        <label for="name">社区名:</label>
                        <input type="text" name="name" value="{{$community->name or ''}}" class="form-control" id="name">
                        <template v-if="form.errors.name"><span class="text-danger" >@{{form.errors.name[0]}}</span></template>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" @click="submitForm()">保存</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                </div>
            </form>
        </div>
    </div>
</div>
<script>
    new Vue({
        el:'#community-form',
        mounted() {
            var id = $('input[name="id"]').val();
            if (id) {
                this.selectProvince();
            }
        },
            data() {
                return {
                    form:{
                        field:{
                            city_id:'{{isset($community)?$community['city_id']:null}}',
                            county_id:'{{isset($community)?$community['county_id']:null}}',
                            cities:null,
                            counties:null
                        },
                        errors:{}
                    },
                }
            },
        methods:{
            submitForm() {
                axios.post('{{route('admin.communities.save')}}',$('form.community').serialize()).then((response) => {
                    if (response.status) {
                        $('#community-form').modal('hide');
                        window.location.reload();
                    }
                }).catch((error) => {
                    if (error.response.status == 422) {
                        this.form.errors = error.response.data.errors;
                    }
                });
            },
            selectProvince() {
                var id = $('#province').val();
                axios.get('/admin/district/get_by_parent/' + id).then((response) => {
                    if (response.data.length > 0) {
                        this.form.field.cities = response.data;
                        $('#city').val('');
                        this.selectCity()
                    }
                }).catch((error) => {
                    console.log(error)
                });
            },
            selectCity() {
                var id = this.form.field.city_id;
                console.log(id)
                if (id) {
                    axios.get('/admin/district/get_by_parent/' + id).then((response) => {
                        if (response.data.length > 0) {
                            this.form.field.counties = response.data;
                            $('#county').val('');
                        } else {
                            this.form.field.counties = null;
                        }
                    }).catch((error) => {
                        console.log(error)
                    });
                } else {
                    this.form.field.counties = null;
                }

            }
        }
    });
</script>
